<template>
    <div class="explore">
        <!-- 这是首页探索 -->
        <div class="img">
            <img v-lazy="data.path" alt="">
            <div class="masking">
                <div class="more">
                    <div class="type">
                        <span>{{data.name}}</span>
                        <div>
                            <router-link to="">探索更多 ></router-link>
                        </div>
                    </div>
                    <hr>
                    <a-row type="flex" justify="space-between" class='sex'>
      	            	<a-col :span="11">
      	            	  	<div>
                                <router-link to="">
                                    <span>男士 ></span>
                                </router-link>
                            </div>
      	            	</a-col>
      	            	<a-col :span="11">
      	            	  	<div>
                                <router-link to="">
                                    <span>女士 ></span>
                                </router-link>
                            </div>
      	            	</a-col>
    	            </a-row>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:["data"]
}
</script>

<style lang='scss' scoped>
    .explore {
        margin: 40px 15px 10px;
        color: white;
        overflow: hidden;
        .img {
            position: relative;
            img {
                width: 100%;
            }
            .masking {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0px;
                left: 0px;
                background-color: rgba($color: #000000, $alpha: 0);
                &:hover {
                    background-color: rgba($color: #000000, $alpha: 0.5);
                }
                &:hover .more {
                    transform: translate(-50%, -10%);
                }
                .more {
                    width: 80%;
                    margin: 0 auto;
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translate(-50%, 40%);
                    transition: 1s all;
                    .type {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 10px;
                        span {
                            font-size: 20px;
                            color: white;
                        }
                        div {
                            a {
                                color: white;
                            }
                            width: 80px;
                            height: 24px;
                            line-height: 24px;
                            border: 1px solid white;
                            font-size: 13px;
                        }
                    }
                    hr {
                        margin: 0;
                    }
                    .sex {
                        margin: 20px 0 0;
                        div {
                            border: 1px solid white;
                            height: 40px;
                            line-height: 40px;
                            a {
                                color: white;
                            }
                        }
                    }
                }
            }
        }
    }
</style>